<template>
  <div class="tabbar">
    <div class="tabbar_left">
      <el-icon style="margin: 0 10px" @click="changeIcon">
        <component :is="settingStore.fold?'Fold':'Expand'"></component>
      </el-icon>
      <el-breadcrumb separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(item,index) in route.matched" :key="index"  v-show="item.meta.title" :to="item.path">
          <el-icon style="margin:0 10px;">
            <component :is="item.meta?.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tabbar_right">
      <el-button size="default" circle icon="RefreshRight" @click="refresh"></el-button>
      <el-button size="default" circle :icon="screen?'FullScreen':'CircleClose'" @click="fullScreen"></el-button>
      <el-button size="default" circle icon="Setting"></el-button>
      <img
        :src="userStore.userList.avatar"
        style="width: 60px; height: 60px; border-radius: 50%; margin: 0 15px"
      />
      <el-dropdown>
    <span class="el-dropdown-link">
     {{userStore.userList.username}}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { useRoute, useRouter} from 'vue-router';
import { ref } from 'vue';
import useUserStore from '../store/modules/user';
import useSettingStore from '../store/modules/setting';
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const screen = ref(true)
const settingStore = useSettingStore()
const changeIcon = () => {
  settingStore.fold = !settingStore.fold
}
const refresh = () => {
  settingStore.refresh = !settingStore.refresh
}
const logOut = async () => {
  await userStore.userLogOut()
  router.push(`/login?toPath=${route.path}`)
}
const fullScreen = () =>{
  let full = document.fullscreenElement
  if(!full){
    document.documentElement.requestFullscreen()
    screen.value = false
  }else{
    document.exitFullscreen()
    screen.value = true
  }
}
</script>
<style scoped lang="scss">
.tabbar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(231, 224, 216);
  .tabbar_left {
    display: flex;
  }
  .tabbar_right {
    display: flex;
    align-items: center;
  }
}
</style>
